React Bootstrap — Nav Customization

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to customize navs to a React app with React Bootstrap.

Alignment and Orientation of Navs

We can change the alignment or orientation of navs.

To do that, we can add class names on the Nav to do that:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav className="justify-content-center" defaultActiveKey="/home">
        <Nav.Item>
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="bar">bar</Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

We add the justify-content-center class to make the nav centered on the page.

Vertical Nav

We can make the nav vertical by adding the flex-column class to the nav.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" className="flex-column">
        <Nav.Link href="/home">home</Nav.Link>
        <Nav.Link eventKey="foo">foo</Nav.Link>
        <Nav.Link eventKey="bar">bar</Nav.Link>
        <Nav.Link eventKey="disabled" disabled>
          disabled
        </Nav.Link>
      </Nav>
    </>
  );
}

to make the nav vertical.

Display as Tabs

We can make the nav display as tabs.

To do that, we set the variant to tabs .

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" variant="tabs">
        <Nav.Link href="/home">home</Nav.Link>
        <Nav.Link eventKey="foo">foo</Nav.Link>
        <Nav.Link eventKey="bar">bar</Nav.Link>
        <Nav.Link eventKey="disabled" disabled>
          disabled
        </Nav.Link>
      </Nav>
    </>
  );
}

Now we see the nav links displayed as tabs.

Pills

We can also change the variant to pills to make them display as pills, which are rounded buttons:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" variant="pills">
        <Nav.Link href="/home" active>
          home
        </Nav.Link>
        <Nav.Link eventKey="foo">foo</Nav.Link>
        <Nav.Link eventKey="bar">bar</Nav.Link>
        <Nav.Link eventKey="disabled" disabled>
          disabled
        </Nav.Link>
      </Nav>
    </>
  );
}

Fill and Justify

We can force the contents of our nav to fill the available width with the fill prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" fill>
        <Nav.Item>
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="baz">bar</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            Disabled
          </Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

We’ve to wrap the Nav.Link s with Nav.Item s to make the fill work.

We can make each nav item the same size with justify:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" justify>
        <Nav.Item>
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="baz">bar</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            Disabled
          </Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

Using Dropdowns

We can put a dropdown in our nav with the NavDropdown component.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" justify>
        <Nav.Item>
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="baz">bar</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            disabled
          </Nav.Link>
        </Nav.Item>
        <NavDropdown title="dropdown">
          <NavDropdown.Item eventKey="1">action 1</NavDropdown.Item>
          <NavDropdown.Item eventKey="2">action 2</NavDropdown.Item>
          <NavDropdown.Item eventKey="3">action 3</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item eventKey="4">action 4</NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </>
  );
}

to add a dropdown with items inside.

The NavDropdown.Item component render the items.

Conclusion

We can add dropdowns to navs.

The sizes of the items can be changed in various ways.

We can also change the nav alignment.